<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="采集名称">
        <el-select
          v-model="queryParams.bigtId"
          placeholder="请选择"
          class="elSelect"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in gatherDateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
          <el-form-item label="院系">
            <el-select
              v-model="queryParams.deptId"
              clearable
              placeholder="请选择"
              @change="handSpeciality"
            >
              <el-option
                v-for="dict in classTreeList"
                :key="dict.id"
                :label="dict.label"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
     
    
          <el-form-item label="专业">
            <el-select
              v-model="queryParams.specialityId"
              clearable
              placeholder="请选择"
              @change="changeGrade"
            >
              <el-option
                v-for="dict in specialityList"
                :key="dict.VALUE"
                :label="dict.TITILE"
                :value="dict.VALUE"
              ></el-option>
            </el-select>
          </el-form-item>
  
    
          <el-form-item prop="gradeId" label="年级">
            <el-select
              v-model="queryParams.gradeId"
              placeholder="请选择"
              @change="changeGrade"
              clearable
              class="elSelect"
            >
              <el-option
                v-for="item in gradeDate"
                :key="item.VALUE"
                :label="item.TITILE"
                :value="item.VALUE"
              ></el-option>
            </el-select>
          </el-form-item>
   <el-form-item label="班级">
            <el-select
              v-model="queryParams.classId"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="dict in classListType"
                :key="dict.VALUE"
                :label="dict.TITLE"
                :value="dict.VALUE"
              ></el-option>
            </el-select>
          </el-form-item>
      <el-form-item label="学籍状态">
        <el-select
          v-model="queryParams.studentStatus"
          placeholder="请选择"
          clearable
          class="elSelect"
          style="width: 100%"
        >
          <el-option
            v-for="dict in dict.type.bc_student_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="在校状态">
        <el-select
          v-model="queryParams.atSchool"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="dict in dict.type.basic_at_school"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="float: right;">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="query"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="paramsQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="各院系字段填写情况" name="first">
        <el-table :data="dataList" stripe>
          <el-table-column prop="collegeName" label="院系"></el-table-column>
          <el-table-column prop="num" label="总人数"></el-table-column>
          <el-table-column prop="numFilled" label="已填写数量">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleFiled(scope.row, 'Y', 'college')"
                >{{ scope.row.numFilled }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="numNotFilled" label="未填写数量">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleFiled(scope.row, 'N', 'college')"
                >{{ scope.row.numNotFilled }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="填写率">
            <template slot-scope="scope">
              <span
                >{{
                  ((scope.row.numFilled / scope.row.num) * 100).toFixed(2)
                }}%</span
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="字段填写情况 " name="second">
        <el-table :data="collegeData" stripe>
          <el-table-column prop="nickName" label="字段名称"></el-table-column>
          <el-table-column prop="filedName" label="字段"></el-table-column>
          <el-table-column prop="num" label="填写总人数"></el-table-column>
          <el-table-column prop="numFilled" label="填写人数">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleFiled(scope.row, 'Y', 'field')"
                >{{ scope.row.numFilled }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="numNotFilled" label="未写人数">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleFiled(scope.row, 'N', 'field')"
                >{{ scope.row.numNotFilled }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <dataIndex ref="studentDate"></dataIndex>
  </div>
</template>

<script>
import {
  statApprInfoNum,
  getApprInfoStudent,
  statFieldFilling,
} from "@/api/flowable/fields.js";
import { getInfoGatherSelect } from "@/api/flowable/gather.js";
import dataIndex from "./component/tableIndex.vue";
import { classTree } from "@/api/information/studentInfor";
import { getGradeSelect } from "@/api/information/gradeInfor";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { getClassSelect } from "@/api/information/classInfor";

export default {
  dicts: [
    "bc_student_status",
    "basic_at_school", // 是否在校'
  ],
  components: { dataIndex },
  data() {
    return {
      showSearch: true,
      // 总条数
      total: 0,
      dataList: [],
      gatherDateList: [],
      collegeData: [],
      activeName: "first",
      queryParams: {
        bigtId: "",
        atSchool: "A",
        studentStatus: "C",
        deptId:'',
        gradeId:'',
        specialityId: '', 
        classId: '', 
      },
      classListType: [],
      classTreeList: [],
      specialityList: [],
      gradeDate: [],
    };
  },
  async created() {
    await getInfoGatherSelect().then((res) => {
      this.gatherDateList = res.data.map((item) => {
        return {
          label: item["BIGT_NAME"],
          value: item["BIGT_ID"],
        };
      });
      this.queryParams.bigtId = this.gatherDateList[0].value;
      this.getList();
      // statFieldFilling(this.queryParams).then(res=>{
      //   console.log(res,'res')
      // })
      //   this.$nextTick(() => {
      //     this.formOptions[0].initValue = this.formOptions[0].options[0].value
      //   });

      console.log(this.formOptions, "this.formOptions");

      // 同时将 initValue 赋值给 formData 以显示初始值
    });
    classTree().then((response) => {
      this.classTreeList = response.data;
    });
     this.getGradeInfor();
    // this.getList()
  },
  methods: {
    handleClick(data) {
      console.log(data, "data");
      if (data.name == "second") {
        statFieldFilling(this.queryParams).then((response) => {
          this.collegeData = response.data;
          this.loading = false;
        });
      } else {
        this.getList();
      }
    },
    handleFiled(row, type, classify) {
      console.log(row, classify,"row");
      if (classify === "field") {
        const data = {
          ...this.queryParams,
          deptId: row.deptId,
          filledType: type,
          fieldName: row.filedName,
        };
        console.log(data,"111111111111");
          this.$refs.studentDate.open(data, type, classify);
      } else {
        const data = {
          ...this.queryParams,
          deptId: row.deptId,
          filledType: type,
        };
          this.$refs.studentDate.open(data, type, classify);
      }

    
    },
    // 获取搜索表单提交的数据
    query(val) {
      // 查询条件和分页数据合并
      this.queryParams = Object.assign(this.queryParams, val);
      // console.log(arr);
      this.queryParams.pageNum = 1;
      this.handleClick(this.activeName);
    },
    // 重置
    paramsQuery(data) {
      console.log(data);
      this.queryParams = {
        deptId: null,
        specialityId: undefined,
        gdpStatus: null,
        classId: undefined,
        bigtId:this.gatherDateList[0].value
      };
      // this.queryParams.atSchool = "C";
      // this.queryParams.studentStatus = "A";
      this.queryParams = Object.assign(this.queryParams, data);
      this.classListType = [];
      this.specialityList = [];
      this.getList();
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      statApprInfoNum(this.queryParams).then((response) => {
        this.dataList = response.data;
        this.loading = false;
      });
    },
     async handSpeciality() {
      this.queryParams.specialityId = "";
      this.queryParams.classId = "";
      this.classListType = [];
      this.getSpeciality();
 
    },
     // 专业
    async getSpeciality() {
      if (this.queryParams.deptId) {
        await getSpecialityByDeptId({ deptId: this.queryParams.deptId }).then(
          (res) => {
            if (res.code == "200") {
              this.specialityList = res.data;
            } else {
              this.specialityList = [];
            }
          }
        );
      } else {
        this.specialityList = [];
      }
    },
     // 年级
    getGradeInfor() {
      getGradeSelect().then((response) => {
        this.gradeDate = response.data;
      });
    },
     getClassList() {
      getClassSelect({
        gradeId: this.queryParams.gradeId,
        specialtyId: this.queryParams.specialityId,
      }).then((res) => {
        console.log(res, "班级");
        this.classListType = res.data;
      });
    },
    changeGrade(value) {
      console.log(value, "ceeee");
      if (value != undefined) {
        if (this.queryParams.specialityId && this.queryParams.gradeId) {
          this.getClassList();
          this.classListType = [];
          this.queryParams.classId = "";
        } else {
          if (!value) {
            this.classListType = [];
            this.queryParams.classId = "";
          }
        }
      }
    },
  },
};
</script>

<style>
</style>